<template>
    <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="内部通知" name="free">
            <el-row>
                <el-row>
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            border
                            stripe
                            :highlight-current-row="true"
                            :header-cell-style="{ background: '#ededed', color: '#333' }"
                    >
                        <el-table-column prop="data" align="center" label="日期" />
                        <el-table-column prop="tit" align="center" label="标题">
                            <template slot-scope="scope">
                                <el-button type="text" @click="detail(scope.row.imgSrc)">
                                    {{ scope.row.tit }}
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" align="center" label="名单" />
                    </el-table>
                </el-row>

                <el-pagination
                        class="text-right"
                        background
                        :current-page="1"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="0"
                />
            </el-row>
        </el-tab-pane>
        <el-dialog
                title="预览"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose"
        >
            <img :src="imgSrc" alt="" />
            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
        </el-dialog>
    </el-tabs>
</template>

<script>
    export default {
        name: 'inside',
        data() {
            return {
                activeName: 'free',
                dialogVisible: false,
                imgSrc: '',
                form: {
                    data: '',
                    tit: '',
                    name: '',
                },
                tableData: [
                    {
                        data: '2020-09-22 13:08:06',
                        tit: '通知',
                        imgSrc: '/assets/img/tong.jpg',
                        name:
                            '刘鹏飞 温晓英 吴春鹤 高强 王云云 张瑞 王兆博 李泽恩 魏宝铭 刘妍妍 张淼 刘蕊 孙浩罡 李雪健 贾子玉 黄贲汐 李雪莲 侯林林 苏泽华 李悦凯 霍英建 姜玉龙 刘长江 刘一波 钟凯强 刘欣',
                    },
                ],
            };
        },
        methods: {
            detail(imgSrc) {
                this.dialogVisible = true;
                this.imgSrc = imgSrc;
                console.log(imgSrc);
                // this.$alert("<img src='src/assets/img/tong.jpg' />", '预览', {
                //   dangerouslyUseHTMLString: true,
                // });
            },
            handleClose() {},
        },
    };
</script>

<style scoped>
    .text-right{
        float: right;
    }
</style>